const main = {
  created: function () {
    $.ajax({
      url: './js/fonts.json',
      dataType: 'json',
      success: function (fontsArray) {
        for (let i in fontsArray) {
          let fonts = fontsArray[i]
          let fontNameIndex = getIndex(fonts)[0]
          let fontName = fonts[fontNameIndex]
          let classNameArray = getIndex(fonts['content'])
          $('#content').append(addContent(fontName, classNameArray))
        }
      },
      error: function () {
        console.log(0)
      },
      finish: function () {
        console.log(-1)
      }
    })
  }
}

Vue.createApp(main).mount('#main')

// Gets an Array of the Index Values of the JSON Object.
function getIndex(json) {
  return Object.keys(json);
}

// contentFonts 标签深拷贝 拷贝主体 #model
function addContent(fontName, classNameArray) {
  // 拷贝主体 .fontName
  let contentFontName = $('<div>')
  contentFontName.addClass('fontName').html(fontName)
  let content = $('<div>').append(contentFontName)

  // 拷贝主体 .font
  let modelFont = $('#model').children('.font').html()
  for (let i in classNameArray) {
    let className = classNameArray[i]
    let contentFont = $('<div>')
    contentFont.addClass('font').html(modelFont)
    contentFont.addClass(String(className))
    content.append(contentFont)
  }

  // let hr = $('<hr>')
  // content.append(hr)

  return content
}
// var let 区别

$(document).ready(function () {
  $('.fontName').click(function () {
    $(this).siblings('.font').toggle()
  })
})